<template>
  <!-- 用户下拉菜单
  -------------------------- -->
  <el-dropdown class="comp-header-user-dropdown"
    @command="changeDropdown">

  <i class="comp-header-user-dropdown__icon iconfont icon-icon-user"></i>

    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item v-for="(item, index) in dropdownList"
        :key="index"
        :command="item">
        {{ item.name }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
export default {
  name: 'CompHeaderUserDropdown',
  data () {
    return {
      dropdownList: [
        {
        //   name: '个人设置',
        //   route: '/login'
        // }, {
          name: '退出',
          route: '/login'
        }
      ]
    }
  },
  methods: {
    // 下拉数据改变
    changeDropdown (v) {
      sessionStorage.removeItem('userInfo')
      this.$store.commit('resetUserInfo')
      this.$router.push(v.route)
    }
  }
}
</script>

<style lang="scss">
@import "src/styles/config/components.scss";

@include b(header-user-dropdown) {

  @include e(icon) {
    height: $--header-height;
    line-height: $--header-height;
    cursor: pointer;
    border-radius: 50%;
    color: $--color-white;
    background-color: $--color-primary;
    padding: 3px;
  }
}
</style>